﻿@{
    Layout = "_Layout";
    ViewData["Title"] = "元数据字段表 - 页面生成";
}
@section Styles {
    <link rel="stylesheet" href="~/codemirror-5.65.11/lib/codemirror.css">
    <link rel="stylesheet" href="~/codemirror-5.65.11/addon/fold/foldgutter.css" />
    <link rel="stylesheet" href="~/codemirror-5.65.11/addon/display/fullscreen.css" />
    <link href="~/codemirror-5.65.11/theme/idea.css" rel="stylesheet" />
}
<div id="main">
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>测试数据</span>
            <div>
                <div>
                    ${}输出块,根目录以Model开头,非根目录以变量开头，可以$if(条件1) .. $elseif(条件2) .. $else .. $end
                </div>
                <div>
                    $foreach(子对象 in 循环对象) ... $end
                </div>
                <div>FirstLower("") 将值的首字母小写</div>
                <div>FirstUpper("") 将值的首字母大写</div>
                <div>ToCamel("") 将字符串转成驼峰形式</div>
                <div>ToCamelAny("") 将字符串转成驼峰形式 去除下划线</div>
            </div>
        </div>
        <div>
            <el-row>
                <el-col :span="24">
                    <textarea id="testDataCode" name="testDataCode" style="display: none;"></textarea>
                </el-col>
            </el-row>
        </div>
    </el-card>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>测试模板(复制这个)</span>
        </div>
        <div>
            <el-row>
                <el-col :span="24">
                    <textarea id="code" name="code" style="display: none;"></textarea>
                </el-col>
            </el-row>
        </div>
    </el-card>
    <div>
        <el-button type="primary" icon="el-icon-edit" v-on:click="BuildCode">测 试</el-button>
        <el-button type="info" v-on:click="copyText">复 制</el-button>
    </div>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>测试结果</span>
            <span id="message"></span>
        </div>
        <div>
            <el-row>
                <el-col :span="24">
                    <textarea id="result" name="result" style="display: none;"></textarea>
                </el-col>
            </el-row>
        </div>
    </el-card>
</div>

@section Scripts {
    <script src="~/codemirror-5.65.11/lib/codemirror.js"></script>
    <script src="~/codemirror-5.65.11/addon/fold/foldcode.js"></script>
    <script src="~/codemirror-5.65.11/addon/fold/foldgutter.js"></script>
    <script src="~/codemirror-5.65.11/addon/fold/brace-fold.js"></script>
    <script src="~/codemirror-5.65.11/addon/fold/xml-fold.js"></script>
    <script src="~/codemirror-5.65.11/addon/fold/indent-fold.js"></script>
    <script src="~/codemirror-5.65.11/addon/fold/markdown-fold.js"></script>
    <script src="~/codemirror-5.65.11/addon/fold/comment-fold.js"></script>
    <script src="~/codemirror-5.65.11/mode/javascript/javascript.js"></script>
    <script src="~/codemirror-5.65.11/mode/xml/xml.js"></script>
    <script src="~/codemirror-5.65.11/mode/css/css.js"></script>
    <script src="~/codemirror-5.65.11/mode/htmlmixed/htmlmixed.js"></script>
    <script src="~/codemirror-5.65.11/mode/python/python.js"></script>
    <script src="~/codemirror-5.65.11/mode/markdown/markdown.js"></script>
    <script src="~/codemirror-5.65.11/mode/go/go.js"></script>
    <script src="~/codemirror-5.65.11/mode/php/php.js"></script>
    <script src="~/codemirror-5.65.11/mode/lua/lua.js"></script>
    <script src="~/codemirror-5.65.11/addon/mode/loadmode.js"></script>
    <script src="~/codemirror-5.65.11/addon/display/fullscreen.js"></script>
    <script src="~/codemirror-5.65.11/addon/selection/active-line.js"></script>
    <script src="~/codemirror-5.65.11/mode/vue/vue.js"></script>
    <script src="~/codemirror-5.65.11/mode/yaml/yaml.js"></script>
    <script src="~/codemirror-5.65.11/mode/clike/clike.js"></script>
    <script id="testDataCodeScript" type="application/json">
{
    "ClassName": "ClassName01",
    "TableName": "TableName01",
    "Description": "表备注",
    "Propertys": [
    {
        "PropertyName": "PId",
        "DbColumnName": "Id",
        "PropertyType": "int",
        "DataType": null,
        "IsPrimaryKey": true,
        "IsIdentity": true,
        "Description": "序号",
        "IsNullable": false,
        "DecimalDigits": null,
        "IsIgnore": false,
        "SpecialType": 0,
        "DefaultValue": null,
        "Length": 0,
        "IsJson": false
    },
    {
        "PropertyName": "PName",
        "DbColumnName": "Name",
        "PropertyType": "string",
        "DataType": null,
        "IsPrimaryKey": false,
        "IsIdentity": false,
        "Description": "名称",
        "IsNullable": false,
        "DecimalDigits": null,
        "IsIgnore": false,
        "SpecialType": 0,
        "DefaultValue": null,
        "Length": 0,
        "IsJson": false
    },
    {
        "PropertyName": "PPrice",
        "DbColumnName": "Price",
        "PropertyType": "decimal?",
        "DataType": null,
        "IsPrimaryKey": false,
        "IsIdentity": false,
        "Description": "价格",
        "IsNullable": true,
        "DecimalDigits": null,
        "IsIgnore": false,
        "SpecialType": 0,
        "DefaultValue": null,
        "Length": 0,
        "IsJson": false
    }
    ]
}
    </script>
    <script id="codeScript" type="text/template">
@@{
    Layout = "_Layout";
    ViewData["Title"] = "${{Model.Description.Replace("\r", "").Replace("\n", "")}}";
}

<el-container>
    <avue-crud :data="tableData" :option="option" :permission="hasPermission" :page.sync="pageOption" :table-loading="loading"
               v-on:refresh-change="refreshChange"
               v-on:row-save="handleRowSave"
               v-on:row-update="handleRowUpdate"
               v-on:row-del="handleRowDel"
               v-on:search-change="searchChange"
               v-on:search-reset="resetChange"
               :cell-style="cellStyle"
               v-on:on-load="onLoad">
        <template slot="record" slot-scope="scope">
            <modify-record :data="scope.row"></modify-record>
        </template>
    </avue-crud>
</el-container>

@@section Scripts {
    < script>
        new Vue({
            el: '#app',
            mixins: [curdMixin],
            data() {
                return {

                    name: "${{FirstLower(Model.ClassName)}}",
                    pageUrl: `/${{FirstLower(Model.ClassName)}}/pages`,
                    addUrl: `/${{FirstLower(Model.ClassName)}}/add`,
                    editUrl: `/${{FirstLower(Model.ClassName)}}/update`,
                    deleteUrl: `/${{FirstLower(Model.ClassName)}}/delete`,

                    option: {
                        searchShowBtn: Permissions.avePermission(`${{FirstLower(Model.ClassName)}}:searchBtn`),
                        refreshBtn: Permissions.avePermission(`${{FirstLower(Model.ClassName)}}:searchBtn`),
                        menuWidth: '350',
                        rowKey: 'id',
                        searchShow: false,
                        column: [$foreach(item in Model.Propertys)
                          $if(item.IsPrimaryKey) { prop: "${{FirstLower(item.PropertyName)}}", label: `${this.i18n.t('primary_key')}`, search: false, hide: true, type: "number", display: false, showColumn: false, }, $else { prop: "${{FirstLower(item.PropertyName)}}", label: `${{item.Description}}`, slot: true, span: 24, search: true, hide: false, width: '100', clearable: true, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], }, $end $end 
                        ],
                    },

                }
            },
            created() {
                this.selectRow = {};
            },
            methods: {
                cellStyle({ row, column, rowIndex, columnIndex }) {
                    if (columnIndex == 7) {
                        if (row.isDisable == 0) {
                            return { color: '#409eff', }
                        }
                        else {
                            return { color: '#f56c6c', }
                        }
                    }
                },
            }
        });
    < /script>

}</script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    selectedLanguage: "text/x-csharp",
                    testDataCodeEdit:null,
                    initcodeEdit:null,
                    resultEditor:null,
                };
            },
            mounted() {
                this.initEdit("testDataCode","testDataCodeScript");
                this.initcode("code","codeScript");
                this.resultEdit();
            },
            methods: {
                initEdit(v,d) { 
                    var te = document.getElementById(v);
                    var sc = document.getElementById(d);
                    te.value = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, "");
                    if (!te) {
                        console.error("无法找到代码编辑区域");
                        return;
                    }
                    this.testDataCodeEdit = CodeMirror.fromTextArea(te, {
                        mode: this.selectedLanguage,
                        lineNumbers: true,
                        lineWrapping: true,
                        foldGutter: true,
                        styleActiveLine: true,
                        matchBrackets: true,
                        indentUnit:2,
                        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
                        extraKeys: {
                            "Ctrl-Q": function (cm) {
                                cm.foldCode(cm.getCursor());
                            },
                            "F11": function (cm) {
                                cm.setOption("fullScreen", !cm.getOption("fullScreen"));
                            },
                            "Esc": function (cm) {
                                if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
                            }
                        }
                    });
                    // this.editor.setOption("indentUnit", 1)
                    // // this.editor.setSize("100", 660);
                    // if (this.editor.lineCount() > 13) {
                    //     this.editor.foldCode(CodeMirror.Pos(13, 0));
                    // }
                },
                initcode(v,d) {
                    var te = document.getElementById(v);
                    var sc = document.getElementById(d);
                    te.value = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, "");
                    if (!te) {
                        console.error("无法找到代码编辑区域");
                        return;
                    }
                    this.initcodeEdit = CodeMirror.fromTextArea(te, {
                        mode: this.selectedLanguage,
                        lineNumbers: true,
                        lineWrapping: true,
                        foldGutter: true,
                        styleActiveLine: true,
                        matchBrackets: true,
                        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
                        extraKeys: {
                            "Ctrl-Q": function (cm) {
                                cm.foldCode(cm.getCursor());
                            },
                            "F11": function (cm) {
                                cm.setOption("fullScreen", !cm.getOption("fullScreen"));
                            },
                            "Esc": function (cm) {
                                if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
                            }
                        }
                    });
                    // // this.editor.setSize("100", 660);
                    // if (this.editor.lineCount() > 13) {
                    //     this.editor.foldCode(CodeMirror.Pos(13, 0));
                    // }
                },
                resultEdit() {
                    var te = document.getElementById("result");
                    if (!te) {
                        console.error("无法找到代码编辑区域");
                        return;
                    }
                    this.resultEditor = CodeMirror.fromTextArea(te, {
                        mode: this.selectedLanguage,
                        lineNumbers: true,
                        lineWrapping: true,
                        foldGutter: true,
                        styleActiveLine: true,
                        matchBrackets: true,
                        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
                        extraKeys: {
                            "Ctrl-Q": function (cm) {
                                cm.foldCode(cm.getCursor());
                            },
                            "F11": function (cm) {
                                cm.setOption("fullScreen", !cm.getOption("fullScreen"));
                            },
                            "Esc": function (cm) {
                                if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
                            }
                        }
                    });
                    // // this.editor.setSize("100", 660);
                    // if (this.editor.lineCount() > 13) {
                    //     this.editor.foldCode(CodeMirror.Pos(13, 0));
                    // }
                },
                copyText() {
                      this.$Clipboard({
                        text: this.resultEditor.getValue()
                      }).then(() => {
                        this.$message.success('复制成功')
                      }).catch(() => {
                        this.$message.error('复制失败')
                      });
                },
                BuildCode(){
                    var txt1= this.testDataCodeEdit.getValue()
                    var txt2= this.initcodeEdit.getValue()
                   this.$http.post(`/FileTemplate/build`,{content:txt2,data:txt1}).then((res) => {
                          console.log("res",res)
                          if (typeof res === 'string')
                          {
                              this.resultEditor.setValue( res);
                          }else
                          {
                              this.resultEditor.setValue( res.message);
                              document.getElementById("message").html=res.message;
                          }
                          this.loading = false;
                        }).catch(e => {
                             console.log("e",e)
                            this.loading = false;
                        });
                }
            }
        });
    </script>
}